<template>
	<view class="product page bgf6">
		<swiper class="imageCover" autoplay>
			<swiper-item v-for="item in detail.imgs_url">
				<image mode="widthFix" class="w-20" :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="bgff p12">
			<view class="flex flexC" v-if="spec.length >0">
				<view class="fs16 bold6 cfc mr6">￥<text class="fs18">{{spec[0].goods_price}}</text></view>
				<text class="line fs10 c99 mt6">￥{{spec[0].line_price}}</text>
			</view>
			<view class="mt10 fs16">{{detail.goods_name}}</view>
			<view class="flex flexC flexB c66 fs12 mt12" v-show="false">
				<view class="flex flexC">
					<image class="w14 mr4" src="/static/imgs/icons/small_ok.png"></image>
					<text>正品保障</text>
				</view>
	
				<view class="flex flexC">
					<image class="w14 mr4" src="/static/imgs/icons/small_ok.png"></image>
					<text>快速发货</text>
				</view>
				<view class="flex flexC">
					<image class="w14 mr4" src="/static/imgs/icons/small_ok.png"></image>
					<text>售后保障</text>
				</view>
			</view>
		</view>
	
		<view class="flex flexC bgff mt10 px12 pt12">
			<text class="bold6 pr21 pb12">规格</text>
			<view class="flex flexC fs12 flex1 pb12">
				<view v-for="(attr, attr_idx) in specData.spec_attr" class="px9 py4 mr8">
					<text v-if="attr_idx <2"  v-for="(item, item_idx) in attr.spec_items">
						{{attr.group_name}},{{item.spec_value}}
					</text></view>
			</view>
			<text class="arrowR mb12"></text>
		</view>
		<!-- 	<view class="flex flexC bgff p12">
			<text class="bold6 pr21">已选</text>
			<view class="flex flexC fs12 flex1">广东省深圳市福田区</view>
			<text class="arrowR"></text>
		</view> -->

		<view class="px12 pt16 pb6" v-show="false">
			<view class="fs16 bold6">为你推荐</view>
			<swiper indicator-dots indicator-active-color="#FF8635" class="h358">
				<swiper-item v-for="item in 2">
					<view class="flex flexB flexW flexC boxS mt14">
						<view v-for="(good,index) in 6" class="w-32 r6 pb10 rel bgff shadow" @click="detail(good)">
							<image class="w-20 h100 rtl4 rtr4" src="/static/imgs/bg/bg2.png" mode="aspectFill"></image>
							<view class="px10 mt4 fs14 ellipsis2">婴幼儿婴幼儿婴幼儿婴幼儿婴幼儿儿婴幼儿婴幼儿婴幼儿儿婴幼儿婴幼儿婴幼儿儿婴幼儿婴幼儿婴幼儿</view>
							<view class="cfc mt4 px10 fs18">￥15.00</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="aliC fs16 py16"><text class="c99 mr8">-----</text>商品详情<text class="c99 ml8">-----</text></view>
		<view style="width: 100%;overflow: hidden;" v-html="newContent"></view> 



		<view class="fixed">

			<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
		
		
		
		
		<uni-popup ref="popup" type="bottom">
			<view class="popupBox pb20">
				<view class="closeBtn" @click="closepopup">
					<image src="/static/imgs/icons/close.png"></image>
				</view>
				<view class="skuItem px15 pb14 flex">
					<view class="cell01 pb16">
						<image class="bor" :src="specImage"></image>
					</view>
					<view class="cell02 flex1 pt18">
						<view class="row01 pr24 fs14">{{detail.goods_name}}</view>
						<view class="row02 fs16 mt4">
							<view class="fs12">¥<text class="fs18 bold6">{{goods_price}}</text></view>
						</view>
						<view class="row01 pr24 mt8 fs12"> <text style="color: red;">已选：</text> <text
								style="color: red;">{{spec_tag}}</text></view>
					</view>
				</view>
				<view>
					<view class="guige mx15" v-for="(attr, attr_idx) in specData.spec_attr" :key="attr_idx">
						<view class="title fs14 pt10">{{attr.group_name}}</view>
						<view class="guigelist flex flexC pb15 flexW">
							<view v-for="(item, item_idx) in attr.spec_items"
								@click="selcetSpecMany(item,attr.spec_items)">
								<view
									:class="[item.is_check==true?'guige-item active':'guige-item','fs12 r30 px16 py6 mr16 mt12']">
								    {{item.spec_value}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="countbar flex flexC flexB mx15 py15">
					<text class="left fs14">购买数量</text>
					<view class="right flex flexC r4">
						<view class="jian" @click="sub">-</view>
						<view class="input">
							<input disabled="disable" v-model="count" type="number" />
						</view>
						<view class="jia" @click="add">+</view>
					</view>
				</view>
				<view class="pt10 pl8 pr15 pb20 flex flexC">
					<image class="w52 mr12" @click="switchCart" src="/static/imgs/icons/cart.png" mode="aspectFill"></image>
					<view class="btn flex flexC flex1">
						<button class="bgffc flex1" @click="joinCart" hover-class="none">加入购物车</button>
						<button class="bgff0 flex1" @click="doCai" hover-class="none">直接下单</button>
					</view>
				</view>
			</view>
		</uni-popup>


		<uni-popup ref="sharePopup" type="bottom" class="sharePopup">
			<view class="w-17 poster flex flexJC flexC">
				<icon @click="onCloseShare" class="del bgff r50" type="clear" color="#363636" size="26" />
				<canvas canvas-id="myCanvas" class="bgff"></canvas>
			</view>
			<view class="flex flexC fs12 aliC bgff px20 py14">
				<view @click="onSaveImage" class="flex1">
					<image class="w46" src="/static/imgs/bg/down.png" mode="aspectFill"></image>
					<view>保存图片</view>
				</view>
				<button @click="share2" class="flex1">
					<image class="w46" src="/static/imgs/bg/wechat.png" mode="aspectFill"></image>
					<view class="fs14">微信</view>
				</button>
				<button @click="share" class="flex1">
					<image class="w46" src="/static/imgs/bg/wechat-moments.png" mode="aspectFill"></image>
					<view class="fs14">朋友圈</view>
				</button>
			</view>
		</uni-popup>
		
		
		<uni-popup ref="cartPop" type="bottom">
			<view class="shopList bgf5 pb10">
				<view class="uls">
					<view class="flex flexC px12 pt6 pb12 bgff">
						<text class="fs16 c00 bold6">购物车</text>
						<text class="fs12 c99 flex1">（共{{cartCount}}件商品）</text>
						<image class="del" src="/static/img/icon/del.png" mode="aspectFill"></image>
						<text class="c66 ml4" @click="clearCart">清空购物车</text>
					</view>
					<view v-for="(item,index) in cartList" class="flex flexC borb px12 py8 bgff">
						<image class="logo r4 bgf5" :src="item.image" mode="aspectFill"></image>
						<view class="flex1 pl12">
							<view class="ellipsis1 c00 fs16">{{item.goods_name}}</view>
							<view class="cff0 fs12 mt6">
								<text class="bgfa r6 px4"></text>
								<text class="cbd ml10">{{item.specTag}}</text>
							</view>
							<view class="flex flexC flexB">
								<view class="c59 fs10 mt6">
									<text class="cff0 fs14">￥{{item.price}}</text>
								</view>
								<view class="flex flexJC flexC">
									<image @click="pSub(item)" class="icon" src="/static/img/icon/reduce.png"
										mode="aspectFill"></image>
									<text class="px8 c00">{{item.count}}</text>
									<image @click="pAdd(item)" class="icon" src="/static/img/icon/add.png"
										mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="flex flexC flexB c00 bold6 fs15 px12 pt24">
						<text>商品总价</text><text>￥{{cartPrice}}</text>
					</view>
		
		
				</view>
				<view class="pt10 pl8 pr15 pb20 flex flexC">
					<view class="btn flex flexC flex1">
						<button @click="doCai" class="bg41 btn flex1" hover-class="none">立即采购</button>
					</view>
				</view>
		
			</view>
		</uni-popup>

	</view>
</template>

<script>
	const screenWidth = uni.getSystemInfoSync().screenWidth;
	
	export default {
		data() {
			return {
				id: '',
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'cart',
					text: '购物车',
					info: this.cartCount
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#FEB300',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#FF0000',
						color: '#fff'
					}
				],
				detail: {},
				spec: [],
				specData: {},
				newContent:'',
				count:1,
				specImage: '',
				spec_tag: '',
				goods_price:'',
				cartList:[],
				cartCount:0,
				profit:0,
				cate_id:-1,
				drawQueue: [],
				ctx: null, //画布上下文
				screenWidth,
				mobile: '',
				avatar: '',
				username: '',
				imgSrc: '',
				shareLogo:'',
				cartPrice:0,
				cartCount:0
				
			};
		},
		computed: {
			myPx() {
				return this.screenWidth / 750
			},
		},
		onLoad(option) {
			
		
			
			this.id = option.id;
			
			if(option.scene){
				let scene = decodeURIComponent(option.scene);
				console.info("====scene==="+scene);
				scene = scene.split("&");
				var mobile =  scene[0];
				this.id = scene[1];
				uni.setStorageSync("refMobile",mobile);
			}
			this.ctx = uni.createCanvasContext('myCanvas', this)
			
			console.info("==id===" + this.id);
			this.getDetail();
		
		},
		onShow() {
			
			
			var cart = uni.getStorageSync("cai");
			if (cart != "") {
				this.cartList = JSON.parse(cart)
				this.cartCount = this.cartList.length;
				this.options= [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'cart',
					text: '购物车',
					info: this.cartCount
				}]
			}
		},
		methods: {
			
			share(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 2,
					imageUrl: this.imgSrc,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			share2(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: this.imgSrc,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			
		
			switchCart(){
				
				uni.switchTab({
					url:'../cart/index'
				})
			},
			
			
			joinCart() {
				var isExit = -1;
				var array = new Array();
				var spec = this.detail.spec;
				var obj = {
					goods_id: this.id,
					skuId: this.spec_sku_id,
					price: this.goods_price,
					specTag: this.spec_tag,
					count: this.count,
					image: this.specImage,
					goods_name: this.detail.goods_name,
			
				}
				for (var i = 0; i < this.cartList.length; i++) {
			
					var good_id = this.cartList[i].goods_id;
					var skuId = this.cartList[i].skuId;
					if ((good_id == obj.goods_id) && (skuId == obj.skuId)) {
						isExit = 1;
						this.cartList[i].count += obj.count;
					}
			
				}
			
				if (isExit == -1) {
					this.cartList.push(obj);
				}
			
				this.cartCount = this.cartList.length;
				this.$refs.popup.close()
				this.options= [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'cart',
					text: '购物车',
					info: this.cartCount
				}]
			
				uni.setStorageSync("cai", JSON.stringify(this.cartList))
			},
			
			
			pSub(item) {
				var count = parseInt(item.count) - 1;
				console.info("===count===" + count);
				var newList = new Array();
				if (count <= 0) {
					for (var i = 0; i < this.cartList.length; i++) {
						if (item.goods_id != this.cartList[i].goods_id) {
							newList.push(this.cartList[i]);
						}
					}
					this.cartList = newList;
			
				}
				item.count = count;
				this.initCart();
			},
			pAdd(item) {
				item.count = parseInt(item.count) + 1;
				this.initCart();
			},
			
			
			doCai() {
				if (this.cartList.length == 0) {
			
					uni.showToast({
						title: "请添加点商品",
						icon: 'none'
					})
					return;
				}
				uni.setStorageSync("cai", JSON.stringify(this.cartList));
				uni.navigateTo({
					url: '/other/cai/submit'
				})
			},
			
			sub() {
			
				this.count -= 1;
				if (this.count <= 1) {
					this.count = 1;
				}
			
			},
			add() {
				this.count += 1;
				console.info("====count=====" + this.count)
			},
			
			initCart() {
				var count = 0;
				var total = 0;
				for (var i = 0; i < this.cartList.length; i++) {
			
					count = count + this.cartList[i].count;
					total += this.cartList[i].price * this.cartList[i].count;
			
				}
				this.cartPrice = total;
				this.cartCount = count;
				this.cartPrice = this.cartPrice.toFixed(2);
				this.cartPrice = parseFloat(this.cartPrice);
				console.info(this.cartList);
			},
			
			initManySpec() {
				console.info("==initManySpec====")
			
				let spec_attr = this.specData.spec_attr;
			
				var spec_ids = new Array();
				var spec_value = new Array();
				for (var i = 0; i < spec_attr.length; i++) {
					let spec_items = spec_attr[i].spec_items;
					for (var j = 0; j < spec_items.length; j++) {
			
						if (spec_items[j].is_check == true) {
							spec_ids.push(spec_items[j].item_id);
							spec_value.push(spec_items[j].spec_value);
						}
					}
			
				}
				var spec_sku_id = "";
				var spec_tag = "";
				for (var i = 0; i < spec_ids.length; i++) {
					if (i == spec_ids.length - 1) {
						spec_sku_id += spec_ids[i];
						spec_tag += spec_value[i];
					} else {
						spec_sku_id += spec_ids[i] + "_"
						spec_tag += spec_value[i] + " ";
			
					}
				}
				this.spec_tag = spec_tag;
				var specList = this.specData.spec_list;
				var selectSpec = "";
				for (var i = 0; i < specList.length; i++) {
					var specSkuId = specList[i].spec_sku_id;
					if (specSkuId == spec_sku_id) {
						selectSpec = specList[i].form;
					}
				}
				this.spec_sku_id = spec_sku_id;
				this.goods_price = selectSpec.goods_price;
				this.line_price = selectSpec.line_price;
			
				this.specImage = selectSpec.imgshow;
				if (this.specImage == null) {
					this.specImage = this.detail.image;
				}
			
				if (spec_ids.length == 0) {
			
					for (var i = 0; i < spec_attr.length; i++) {
						let spec_items = spec_attr[i].spec_items;
						spec_items[0].is_check = true;
			
					}
					this.initManySpec();
				}
			
				console.info(spec_sku_id + "==spec_ids====" + JSON.stringify(spec_ids))
			
			},
			
			
			//选择多规格
			selcetSpecMany(item, list) {
			
				for (var i = 0; i < list.length; i++) {
					list[i].is_check = false;
				}
				item.is_check = true;
				this.initManySpec();
			},

			closepopup(){
				this.$refs.popup.close();
			},
			getDetail() {
				let param = {
					goods_id: this.id
				}
				let that = this;
				this.$api.onlineGoodsDetail(param).then(res => {
					console.info(res);

					if (res.code == 1) {

						that.detail = res.data.detail;
						that.spec = res.data.detail.spec;
						that.specData = res.data.specData;
						let newContent = res.data.detail.content.replace(/\<img/gi,
							'<img style="max-width:100%;widht:100%,height:auto;display:block;"');
						that.newContent = newContent;
						if(that.spec.length > 0){
							that.goods_price = that.spec[0].goods_price;
						}
						that.initManySpec()
						
						
					}
				})
			},

			onClick(e) {
				
				if(e.content.text == '客服'){
					
					uni.makePhoneCall({
						phoneNumber:'4001073188'
					})
				}else{
					this.initCart();
					this.$refs.cartPop.open();
				}
				
			},
			buttonClick(e) {
				console.log(e)
				var index = e.index;
			
				if(index == 1){
					
					//this.addOrder();
				}
				this.$refs.popup.open();
				console.log(index)
			},
			addOrder(){
				
				var obj = {
					goods_id: this.id,
					skuId: this.spec_sku_id,
					price: this.goods_price,
					specTag: this.spec_tag,
					count: this.count,
					image: this.specImage,
					count: this.count,
					image: this.detail.imgs_url[0],
					goods_name: this.detail.goods_name,
				
				}
				if (obj.skuId == "") {
					uni.showToast({
						title: "请选择规格",
						icon: 'none'
					});
				
					return;
				}
				
				var array = new Array();
				array.push(obj);
				uni.navigateTo({
					url:'../goods/submit?item=' + encodeURIComponent(JSON.stringify(array))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.product {
		
		canvas {
			height: 880upx;
			width: 640upx;
		}
		.bgffc{background-color: #FFCF49;color: #fff;}
		
		
		.sharePopup {
			.poster {
				position: relative;
				margin: 0 auto 80upx;
				height: 70vh;
		
				.del {
					position: absolute;
					top: -42upx;
					right: -24upx;
					z-index: 999;
				}
		
				image {
					height: 100%;
				}
			}
		
			.w46 {
				width: 92upx;
				height: 92upx;
			}
		}
		
		.popupBox {
			
			
			.w52 {
				width: 104upx;
				height: 104upx;
			}
			
			border-radius: 20rpx 20rpx 0 0;
			position: relative;
			background: #FFFFFF;
		
			.closeBtn {
				position: absolute;
				right: 24rpx;
				top: 24rpx;
		
				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		
			.skuItem {
				// padding: 84rpx 50rpx 20rpx 30rpx;
				// display: flex;
		
				.cell01 {
					margin-right: 30rpx;
					margin-top: -40upx;
		
					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
						vertical-align: middle;
					}
				}
		
				.cell02 {
					.row01 {
						color: #1A1A1A;
						// font-size: 30rpx;
						// margin: 10rpx 0 25rpx 0;
					}
		
					.row02 {
						color: #000;
						// font-size: 32rpx;
					}
				}
			}
		
			.guige {
				// margin: 30rpx 30rpx 20rpx 30rpx;
				border-top: 1rpx solid #ECEBEB;
		
				.title {
					color: #1A1A1A;
					// font-size: 24rpx;
					// padding: 30rpx 0;
				}
		
				.guigelist {
					max-height: 230rpx;
					overflow-y: scroll;
		
					.guige-item {
						color: #9A9A9A;
						background: #EFEFEF;
						cursor: pointer;
					}
		
					.guige-item.active {
						background: #FF0000;
						color: #FFFFFF;
					}
				}
			}
		
			.countbar {
				border-top: 1rpx solid #ECEBEB;
				// display: flex;
				// padding: 30rpx 0;
				// margin: 0 30rpx;
		
				.left {
					// flex: auto;
					// font-size: 24rpx;
					color: #1A1A1A;
				}
		
				.right {
					// display: flex;
					border: 1rpx solid #ececec;
					height: 60rpx;
					line-height: 60rpx;
		
					.jian {
						color: #979797;
						border-right: 1rpx solid #ececec;
						width: 60rpx;
						text-align: center;
						font-size: 50rpx;
					}
		
					.jia {
						color: #1A1A1A;
						border-left: 1rpx solid #ececec;
						width: 60rpx;
						text-align: center;
						font-size: 40rpx;
					}
		
					.input {
						color: #1A1A1A;
						font-size: 28rpx;
						width: 80rpx;
						text-align: center;
		
						input {
							height: 60rpx;
							line-height: 60rpx;
						}
					}
				}
			}
		
			.btn {
				// padding: 20rpx 30rpx;
		
				button {
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					font-size: 30rpx;
		
					&.bgffc {
						border-radius: 80upx 0 0 80upx;
					}
		
					&.bgff0 {
						border-radius: 0 80upx 80upx 0;
					}
				}
		
				button::after {
					border: none;
				}
			}
		}
		
		.bg20 {
			background-color: #202020;
			z-index: 9999;
			position: absolute;
			bottom: 20upx;
			width: 83%;
		
			.w37 {
				width: 74upx;
			}
		
			.imgbox {
				position: relative;
		
				.num {
					position: absolute;
					top: 6upx;
					right: -16upx;
					height: 36upx;
					min-width: 36upx;
					line-height: 36upx;
				}
			}
		
			.icon {
				width: 42upx;
				height: 42upx;
			}
		
			.bg00b {
				height: 120upx;
				line-height: 120upx;
				border-top-right-radius: 80upx;
				border-bottom-right-radius: 80upx;
			}
		}
		
		.shopList {
			border-top-left-radius: 34upx;
			border-top-right-radius: 34upx;
			overflow: hidden;
		
			.bgf3 {
				background-color: #F3DEAF;
			}
		
			.uls {
				max-height: 70vh;
				overflow-y: auto;
			}
		
			.ellipsis1 {
				max-width: 500upx;
			}
		
			.logo {
				width: 146upx;
				height: 146upx;
			}
		
			.del {
				width: 30upx;
				height: 30upx;
			}
		
			.cff0 {
				.bor {
					border-color: #FF0000;
				}
			}
		
			.btn {
				line-height: 2;
			}
		}
		
		.list {
			box-sizing: border-box;
			height: calc(100vh - 400upx);
		
			.item {
				border: 2upx solid #FA4F46;
		
				.bgfa {
					background-color: #FA4F46;
				}
		
				.left {
					width: 25%;
					border-left: 4upx solid #FA4F46;
				}
			}
		}
		
		.box4 {
			.icon2 {
				width: 24upx;
			}
		}
		
		.lis {
			height: calc(100vh - 400upx);
		
			.scroll {
				height: calc(100% - 56upx);
			}
		
			.logo {
				position: relative;
				width: 146upx;
				height: 146upx;
		
				image {
					width: 100%;
					height: 100%;
				}
		
				.scale {
					position: absolute;
					bottom: 14upx;
					right: 24upx;
					border-top-left-radius: 16upx;
				}
			}
		
			.sort {
				width: 10upx;
			}
		}
		
		.bg20 {
			background-color: #202020;
			z-index: 9999;
		
			.bg00b {
				height: 120upx;
				line-height: 120upx;
				border-top-right-radius: 80upx;
				border-bottom-right-radius: 80upx;
			}
		}
		
		.cart {
			position: absolute;
			bottom: 110rpx;
			right: 20rpx;
		
			image {
				width: 88rpx;
				height: 88rpx;
			}
		}
		
		
		
		
		
		
		.imageCover {
			height: 550rpx;

		}

		.w14 {
			width: 28rpx;
			height: 28rpx;
		}

		.h100 {
			height: 200rpx;
		}

		.h358 {
			height: 800rpx;
		}

		.fixed {
			position: fixed;
			bottom: 0;
			width: 750rpx;
		}
	}
	

		.icon {
			width: 42upx;
			height: 42upx;
		}

		.shopList {
			border-top-left-radius: 34upx;
			border-top-right-radius: 34upx;
			overflow: hidden;

			.bgf3 {
				background-color: #F3DEAF;
			}

			.uls {
				max-height: 70vh;
				overflow-y: auto;
			}

			.ellipsis1 {
				max-width: 500upx;
			}

			.logo {
				width: 146upx;
				height: 146upx;
			}

			.del {
				width: 30upx;
				height: 30upx;
			}

			.cff0 {
				.bor {
					border-color: #FF0000;
				}
			}

			.btn {
				line-height: 2;
			}
		}	
	
	

</style>
